@<template>
  <div class="one">
    <form method="post" action="#">
      <div class="input-group">
        <input type="text" placeholder="请输入关键词。。。" />
         <img src="../assets/icon/搜索3.png" alt="" width="30px" height="30px" class="imgsou">
      </div>
    </form>
        <div class="CategoryNavigation">
          
          </div>  
  </div>
</template>

<script>
export default {
  name: "search",
  data() {
    return {};
  },
};
</script>

<style lang='less'>
/*设置表单组中输入框的样式*/
.input-group {
  width: 90%;
  margin: 5%;
}
.input-group input {
  height: 3em;
  line-height: 10em;
  width: 30%;
  border: 1px solid #cccccc;
  padding-left: 1.2em;
  font-size: 14px;
  margin-top: -20px;
  margin-left: -15px;
  border-radius: 7px;
}
@media (min-width: 800px) and (max-width: 1280px) {
  .input-group input {
    height: 3em;
    line-height: 3em;
    font-size: 22px;
  }
}

.input-group input,
.input-group button {
  float: left;
}

/* 定义动画帧 开始 */
@-webkit-keyframes glow {
  0% {
    border-color: #cccccc;
    box-shadow: 0 0 15px rgba(102, 153, 255, 0.2),
      inset 0 0 15px rgba(102, 153, 255, 0.1);
  }
  100% {
    border-color: #66ffff;
    box-shadow: 0 0 20px rgba(102, 153, 255, 0.6),
      inset 0 0 10px rgba(102, 153, 255, 0.4);
  }
}

@-moz-keyframes glow {
  0% {
    border-color: #cccccc;
    box-shadow: 0 0 15px rgba(102, 153, 255, 0.2),
      inset 0 0 15px rgba(102, 153, 255, 0.1);
  }
  100% {
    border-color: #66ffff;
    box-shadow: 0 0 20px rgba(102, 153, 255, 0.6),
      inset 0 0 20px rgba(102, 153, 255, 0.4);
  }
}

@-o-keyframes glow {
  0% {
    border-color: #cccccc;
    box-shadow: 0 0 15px rgba(102, 153, 255, 0.2),
      inset 0 0 15px rgba(102, 153, 255, 0.1);
  }
  100% {
    border-color: #66ffff;
    box-shadow: 0 0 20px rgba(102, 153, 255, 0.6),
      inset 0 0 20px rgba(102, 153, 255, 0.4);
  }
}

@-ms-keyframes glow {
  0% {
    border-color: #cccccc;
    box-shadow: 0 0 15px rgba(102, 153, 255, 0.2),
      inset 0 0 15px rgba(102, 153, 255, 0.1);
  }
  100% {
    border-color: #66ffff;
    box-shadow: 0 0 20px rgba(102, 153, 255, 0.6),
      inset 0 0 20px rgba(102, 153, 255, 0.4);
  }
}

@keyframes glow {
  0% {
    border-color: #cccccc;
    box-shadow: 0 0 15px rgba(102, 153, 255, 0.2),
      inset 0 0 15px rgba(102, 153, 255, 0.1);
  }
  100% {
    border-color: #66ffff;
    box-shadow: 0 0 20px rgba(102, 153, 255, 0.6),
      inset 0 0 20px rgba(102, 153, 255, 0.4);
  }
}
/* 定义动画帧 结束 */

/*当表单组中组件获得焦点的时候，执行动画*/
.input-group input:focus,
.input-group .input-group-btn .btn:focus {
  outline: none;
  -webkit-animation: glow 800ms ease-out infinite alternate;
  -moz-animation: glow 800ms ease-out infinite alternate;
  -o-animation: glow 800ms ease-out infinite alternate;
  -ms-animation: glow 800ms ease-out infinite alternate;
  animation: glow 800ms ease-out infinite alternate;
}
.imgsou{
  /* border: 1px solid red; */
  margin-top: -15px;
  margin-left: -35px;
  cursor: pointer;
}
.CategorNavigation{
border: 1px solid red;
width: 200px;
height: 200px;
}
</style>